<template>
  <div>
      <div>
         <div class="dltop">
           <van-icon name="cross" />
           <h3>密码登录</h3>
         </div>
         <div class="dlcenter">
           <input type="text" v-model="value" placeholder="请输入账号">
           <input type="password" placeholder="请输入密码" v-model="mima">
         </div>
         <div class="dlbutton">
           登录
         </div>
         <div class="dldown">
           <input type="checkbox" name="" id="">登录代表你已同意<b>土巴兔服务协议</b>和<b>隐私政策</b>
         </div>
      </div>
<van-number-keyboard
v-model="value"
  :show=true
  @blur="show = false"
  @input="onInput"
  @delete="onDelete"
/>
  </div>
</template>

<script>
import { Toast } from 'vant';
export default {
     data() {
    return {
      show: true,
      value: '', 
      mima:""
    };
  },
  methods: {
    onInput(value) {
      Toast(value);
    },
    onDelete() {
      Toast('删除');
    },
  },
}
</script>

<style scoped>
   .dltop{
     display: flex;
     align-items: center;
     margin-top: .2rem;
   }
   h3{
     margin-left: 1.3rem;
   }
   .dlcenter{
     text-align: center;
     margin-top: .2rem;
   }
   .dlcenter input{
     border: none;
     border-bottom: 1px solid gray;
     /* margin-top: .1rem; */
     width: 2.8rem;
     height: .4rem;
     font-size: .2rem;
   }
   .dlbutton{
     width: 3rem;
     height: .5rem;
     background-color: #c8eed9;
     border-radius: .5rem;
     text-align: center;
     line-height: .5rem;
     color: white;
      margin: 0 auto;
     margin-top: .2rem;
   }
   .dldown{
     font-size: .1rem;
     margin: 0 auto;
     margin-top: .1rem;
     text-align: center;
   }
</style>